<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="./head.jsp"%>
<!DOCTYPE html>
<html>
	<head>
	<base href="<%=basePath%>">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>KanKan	Book</title>	
		<link rel="stylesheet" href="${domainStaticUrl}/css/core.css" />
		<link rel="stylesheet" href="${domainStaticUrl}/css/menu.css" />
		<link rel="stylesheet" href="${domainStaticUrl}/css/amazeui.css" />
		<link rel="stylesheet" href="${domainStaticUrl}/css/component.css" />
		<link rel="stylesheet" href="${domainStaticUrl}/css/form.css" />
		<link rel="shortcut icon" href="${domainStaticUrl}/images/inform.ico" type="image/x-icon">
		<script type="text/javascript" src="${domainStaticUrl}/js/jquery-1.8.2.js"></script>
		<script type="text/javascript" src="${domainStaticUrl}/layer/layer.js"></script>
	</head>
	<body>
		<div class="account-pages" style="background:url(${domainStaticUrl}/images/bg1.jpg) center !important;">
			<div class="wrapper-page">
				<div class="text-center">
	                <a class="logo"><span>注册</span></a>
	            </div>
	            
	            <div class="m-t-40 card-box">
	            	<div class="text-center">
	                    <h4 class="text-uppercase font-bold m-b-0">regin</h4>
	                </div>
	                <div class="panel-body">
	                	<div class="am-form">
	                		<div class="am-g">
	                		<!--用户名  -->
	                			<div class="am-form-group">
							      <input id="userName" type="text" class="am-radius"  placeholder="用户名" name="userName">
							      <div id="userNameYes" style="margin-left: 320px;margin-top: -30px; display:none;"></div>
							     <div id="userNameNo" style="color: red;font-size: 15px;margin-top: 5px; display:none;">用户名已存在!</div>
							     <div id="userNameNull" style="color: red;font-size: 15px;margin-top: 5px; display:none;">用户名不能为空!</div>
							    </div>
							<!-- 密码 -->
							    <div class="am-form-group form-horizontal m-t-20">
							      <input id="passWord" type="password" class="am-radius"  placeholder="密码长度8~16位,数字字母组成" name="passWord">
							  		 <div id="passWordYes" style="margin-left: 320px;margin-top: -30px; display:none;"></div>
							     	<div id="passWordNo" style="color: red;font-size: 15px;margin-top: 5px; display:none;">密码设置不正确!</div>
							    </div>
						    <!-- 电话号码 -->
							    <div class="am-form-group form-horizontal m-t-20">
							      <input id="userTel" type="text" class="am-radius"  placeholder="电话" name="userTel">
							       <div id="userTelYes" style="margin-left: 320px;margin-top: -30px; display:none;"></div>
							     	<div id="userTelNo" style="color: red;font-size: 15px;margin-top: 5px; display:none;">手机号不正确!</div>
							    </div>
							 <!-- 邮箱 -->   
							    <div class="am-form-group form-horizontal m-t-20">
							      <input id="email" type="text" class="am-radius"  placeholder="填写邮箱,获取验证码" name="email">
							      <div>
							      	<input id="writeEmail" style="margin-top: 25px;width: 180px" type="email"  placeholder="填写验证码" name="writeEmail">
							      	<div id="emailYes" style="margin-left: 320px;margin-top: -32px; display:none;"></div>
							      	<input id="sendEmail" style="margin-left:200px;margin-top:-37px;width: 110px;height: 37px;background: #0e90d2;color:white;border: 0px" type="button" value="发送验证码">
							      </div>
							    
							    </div>
							    
		                        <div class="am-form-group ">
		                        	<button id="submit" class="am-btn am am-radius">注册</button>
		                        </div>
		                        
		                         <div class="am-form-group form-horizontal m-t-20">
							     	<div id="reginNo" style="color: red;font-size: 18px;margin-top: 5px;text-align: center; display:none;">注册失败!请检查你的填写项!</div>
							    </div>
		                        
		                        <div class="am-form-group ">
		                        	<h4><a href="${domainUrl}/toLogin">-->已有账号了?去登录?</a></h4>
		                        
		                        </div>
	                		</div>
						</div>
	                	
							
	                </div>
	            </div>
			</div>
		</div>
<script type="text/javascript">
	//用户名判断是否已存在
			$("#userName").blur(function(){
				if(null!=$("#userName").val()&&""!=$("#userName").val()){
					$.post("userName.tushu",{"userName":$("#userName").val()},function(r){
						var obj=eval("("+r+")"); 
						if(null==obj){
							var userNameYes=$("#userNameYes");
							userNameYes.css("display","block");
							var userNameHtml="<img src='${domainStaticUrl}/images/gou.png' />";
							userNameYes.html(userNameHtml);
						}
						else{
							var userNameNo=$("#userNameNo");
							userNameNo.css("display","block");
						}
					 });
				}else{
					var userNameNull=$("#userNameNull");
					userNameNull.css("display","block");
				}
			});
			//焦点获取事件focus
			$("#userName").focus(function(){
				var userNameYes=$("#userNameYes");
				userNameYes.css("display","none");
				var userNameNo=$("#userNameNo");
				userNameNo.css("display","none");
				var userNameNull=$("#userNameNull");
				userNameNull.css("display","none");
				var reginNo= $("#reginNo");
				reginNo.css("display","none");
			})
//密码8-16位,数字字母组成		
			$("#passWord").blur(function(){
				var RE=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
				var passWord=RE.test($("#passWord").val());
				if(false==passWord){
					var passWordNo=$("#passWordNo");
					passWordNo.css("display","block");
				}else{
					var passWordYes=$("#passWordYes");
					passWordYes.css("display","block");
					var passWordHtml="<img src='${domainStaticUrl}/images/gou.png' />";
					passWordYes.html(passWordHtml);
					
				}
			})
			$("#passWord").focus(function(){
				var passWordYes=$("#passWordYes");
				passWordYes.css("display","none");
				var passWordNo=$("#passWordNo");
				passWordNo.css("display","none");
				var reginNo= $("#reginNo");
				reginNo.css("display","none");
			})
//判断电话是否合法
			$("#userTel").blur(function(){
				var RE=/^1[3|4|5|7|8][0-9]{9}$/;
				var userTel=RE.test($("#userTel").val());
				if(false==userTel){
					var userTelNo=$("#userTelNo");
					userTelNo.css("display","block");
				}else{
					var userTelYes=$("#userTelYes");
					userTelYes.css("display","block");
					var userTelHtml="<img src='${domainStaticUrl}/images/gou.png' />";
					userTelYes.html(userTelHtml);
					
				}
			})
			$("#userTel").focus(function(){
				var userTelYes=$("#userTelYes");
				userTelYes.css("display","none");
				var userTelNo=$("#userTelNo");
				userTelNo.css("display","none");
				var reginNo= $("#reginNo");
				reginNo.css("display","none");
			})
//判断邮箱			
			$("#sendEmail").click(function(){
				var RE=/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
				var email=RE.test($("#email").val());
				var emailAddress=$("#email").val();
				if(email){
                    $("#sendEmail").val("正在发送...");
                    $("#sendEmail").attr("disabled",true);
					$.post("getEmail.tushu",{"emailAddress":emailAddress},function(r){
					var obj=eval("("+r+")");
						if(obj.num==1){
							$("#sendEmail").val("已发送");
							/*让这个按钮不可按*/
							$("#sendEmail").attr("disabled", false)
                            $("#sendEmail").attr("title", "想要重新发送验证码请再次点击发送！")
						}
					});
				}else{
					alert("邮箱不合法,请重新输入")
				}
			})
		$("#writeEmail").blur(function(){
			var writeEmail=$("#writeEmail").val();
			$.post("getEmail.tushu",{"emailCode1":writeEmail},function(r){
				var obj=eval("("+r+")");
				if(obj.num==1){
					var emailYes=$("#emailYes");
					emailYes.css("display","block");
					var emailYesHtml="<img src='${domainStaticUrl}/images/gou.png' />";
					emailYes.html(emailYesHtml);
				}else{
					layer.alert("验证码不正确,重新填写!")
				}
			});
		})
			
//提交
			$("#submit").click(function(){
				var length=$("#userNameYes").find("img").length;
				var length2=$("#passWordYes").find("img").length;
				var length3=$("#userTelYes").find("img").length;
				var length4=$("#emailYes").find("img").length;
				var reginNo= $("#reginNo");
				if((length+length2+length3+length4)==4){
					$.post("regin",{"userEmail":$("#email").val(),"userName":$("#userName").val(),"passWord":$("#passWord").val(),"userTel":$("#userTel").val()},function(r){
						var obj=eval("("+r+")");
						console.log(obj)
						console.log(r)
						var num=obj.num;
						if(0==num){
							reginNo.css("display","block");
						}else{
					//跳转页面						
							location.href="${domainUrl}/toLogin";
						}
					})
				}else{
					reginNo.css("display","block");
				}
				
			})
</script>		
		
	</body>
</html>

